<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册页面</title>
    <!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
    <script src="./static/element-plus/theme-chalk/display.css"></script>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :md="24":lg="8"></el-col>
            <el-col :md="24" :lg="8" style="display: flex; flex-direction:row; align-items: center">
                <el-form :model="form" label-width="auto" style="max-width: 600px">
                    <el-form-item label="用户名" :error="usernameError">
                        <el-input v-model="username" placeholder="请输入用户名" @blur="validateUsername" />
                    </el-form-item>
                    <el-form-item label="密码" :error="passwordError">
                        <el-input v-model="password" type="password" placeholder="请输入密码" @blur="validatePassword" />
                    </el-form-item>
                    <el-form-item label="确认密码" :error="confirmPasswordError">
                        <el-input v-model="confirmPassword" type="password" placeholder="请确认密码" @blur="validateConfirmPassword" />
                    </el-form-item>
                    <el-form-item label="年龄" :error="ageError">
                        <el-input v-model="age" type="number" placeholder="请输入年龄" @blur="validateAge" />
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="gender">
                            <el-radio value="男">男</el-radio>
                            <el-radio value="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="兴趣爱好">
                        <el-checkbox-group v-model="hobbies">
                            <el-checkbox value="阅读" name="type">阅读</el-checkbox>
                            <el-checkbox value="运动" name="type">运动</el-checkbox>
                            <el-checkbox value="旅行" name="type">旅行</el-checkbox>
                            <el-checkbox value="数码" name="type">数码</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="职业">
                        <el-select v-model="occupation" placeholder="请选择你的职业">
                            <el-option value="前端开发工程师">前端开发工程师</el-option>
                            <el-option value="软件开发工程师">软件开发工程师</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="自我介绍">
                        <el-input v-model="introduction" type="textarea" placeholder="请输入自我介绍" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">提交</el-button>
                    </el-form-item>
                </el-form>
              </el-col>
              <el-col :md="24":lg="8"></el-col>
        </el-row>
            <el-dialog v-model="dialogVisible"title="请确认注册信息"width="500":before-close="handleClose">
                <p>{{username}}</p>
                <p>{{password}}</p>
                <p>{{age}}</p>
                <p>{{gender}}</p>
                <p>{{hobbies}}</p>
                <p>{{occupation}}</p>
              <template #footer>
                  <div class="dialog-footer">
                     <el-button @click="dialogVisible = false">取消</el-button>
                     <el-button type="primary" @click="dialogVisible = false">提交</el-button>
                  </div>
              </template> 
            </el-dialog>
    </div>
</body>
<script>
   const App = {
      data() {
         return {
            username: '',
            password: '',
            confirmPassword: '',
            age: '',
            gender: '',
            hobbies: [],
            occupation: '',
            introduction: '',
            dialogVisible: false,
            usernameError: '',
            passwordError: '',
            confirmPasswordError: '',
            ageError: '',
        }
      },     
      methods: {
         validateUsername() {
            if (this.username.length < 4) {
               this.usernameError = '用户名至少需要4个字符';
            } else {
               this.usernameError = '';
            }
         },
         validatePassword() {
            if (this.password.length < 6) {
               this.passwordError = '密码至少需要6个字符';
            } else {
               this.passwordError = '';
            }
         },
         validateConfirmPassword() {
            if (this.password !== this.confirmPassword) {
               this.confirmPasswordError = '两次输入的密码不一致';
            } else {
               this.confirmPasswordError = '';
            }
         },
         validateAge() {
            if (this.age < 0) {
               this.ageError = '年龄不能为负数';
            } else {
               this.ageError = '';
            }
         },
         submitForm() {
            this.validateUsername();
            this.validatePassword();
            this.validateConfirmPassword();
            this.validateAge();
            if (!this.usernameError && !this.passwordError && !this.confirmPasswordError && !this.ageError) {
               this.dialogVisible = true;
            }
         },
      }
   }
   Vue.createApp(App).use(ElementPlus).mount("#app");
</script>
</html>
